import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { AccountBannerMock } from './mock'

export default function AccountBanner() {
    const [accountBanner, setAccountBanner] = useRecoilState(AccountBannerMock)
    const [maskPadd, setMaskPadd] = useState<any>('2rem')

    useEffect(() => {
        $(`.${style.container}`).width()! <= 500 ? setMaskPadd('0.8rem') : setMaskPadd('2rem')
    }, [])

    return (
        <div
            className={style.container}
            style={{
                ['--padding-' as any]: maskPadd
            }}>
            <div className={style.mask}>
                <p>LineView</p>
                <span className={style.title}>创造从这里开始</span>
            </div>
            <div className={style.content}>
                <img src={accountBanner.img} />
            </div>
        </div>
    )
}
